<template>
    <div>
      <div>
        <div class="title">
          {{detail.title}}
        </div>
        <div v-for="(imgItem, index) in detail.img" :key="index">
          <img class="newImg" v-lazy=imgItem.img alt="">
          <p>{{ imgItem.summary }}</p>
        </div>
        <div class="detail">
          &nbsp;&nbsp;&nbsp;&nbsp;
          {{detail.detail}}
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "detail",
      data(){
        return {
          detail:{},
          id:1
        }
      },
      created(){
          if(this.$route.params.id == 1){
            this.id = this.$route.params.id;
          }
        //假id，妈的没用
        this.$axios.get('/share/detail',{
          params:{
            id: this.id
          }
        })
          .then(res => {
            this.detail = res.data.detail;
            console.log(this.detail);
          })
          .catch(err => {
            console.log(err);
          })
      }
    }
</script>

<style scoped>
  .title{
    text-align: center;
    color: #007aff;
    font-size: 18px;
    margin-top: 20px;
  }
  .newImg{
    width: 100%;
  }
  .detail{
    font-size: 16px;
    color: #8f8f94;
  }
  img{
    height: 200px;
  }
  p{
    margin-left: 25px;
    font-size: 17px;
    color: #8f8f94;
  }
  image[lazy=loading] {
    width: 40px;
    height: 300px;
    margin: auto;
  }
</style>
